<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <script>
            PrimeFaces.locales ['de'] = {
                monthNames: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                monthNamesShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
                dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
                dayNamesShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
                dayNamesMin: ['S', 'M', 'D', 'M ', 'D', 'F ', 'S'],
                weekHeader: 'Woche',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                timeOnlyTitle: 'Nur Zeit',
                timeText: 'Zeit',
                hourText: 'Stunde',
                minuteText: 'Minute',
                secondText: 'Sekunde',
                today: 'Aktuelles Datum',
                ampm: false,
                month: 'Monat',
                week: 'Woche',
                day: 'Tag',
                allDayText: 'Ganzer Tag',
                aria: {
                   close: 'Schließen',
                   previous: 'Zurück',
                   next: 'Weiter',
               }
            };
        </script>

        <style>
            .value {
                font-weight: bold;
            }
        </style>
    </ui:define>

    <ui:define name="title">
        Calendar (java.util.Date)
    </ui:define>

    <ui:define name="description">
        Calendar is an input component to pick a datetime.
    </ui:define>

    <ui:param name="documentationLink" value="/components/calendar"/>
    <ui:param name="widgetLink" value="Calendar-1"/>

    <ui:define name="implementation">
        <div class="card">
            <h:form id="form">
                <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true"/>

                <h:panelGrid columns="2" cellpadding="5">
                    <p:outputLabel for="inline" value="Inline:"/>
                    <p:calendar id="inline" value="#{calendarView.date1}" mode="inline"/>

                    <p:outputLabel for="popup" value="Popup:"/>
                    <p:calendar id="popup" value="#{calendarView.date2}"/>

                    <p:outputLabel for="button" value="Button:"/>
                    <p:calendar id="button" value="#{calendarView.date3}" showOn="button"/>

                    <p:outputLabel for="event" value="Select Event:"/>
                    <p:calendar id="event" value="#{calendarView.date4}">
                        <p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs"/>
                    </p:calendar>

                    <p:outputLabel for="german" value="German:"/>
                    <p:calendar id="german" value="#{calendarView.date5}" locale="de" navigator="true"
                                pattern="yyyy-MMM-dd"/>

                    <p:outputLabel for="germanV2" value="German (other Pattern):"/>
                    <p:calendar id="germanV2" value="#{calendarView.dateDe}" locale="de" navigator="true"
                                pattern="dd.MM.yyyy"/>

                    <p:outputLabel for="restricted" value="Restricted:"/>
                    <p:calendar id="restricted" value="#{calendarView.date6}" mindate="#{calendarView.minDate}"
                                      maxdate="#{calendarView.maxDate}"/>

                    <p:outputLabel for="multi" value="Multiple:"/>
                    <p:calendar id="multi" value="#{calendarView.date7}" pages="3"/>

                    <p:outputLabel for="effect" value="Effect:"/>
                    <p:calendar id="effect" value="#{calendarView.date8}" effect="fold"/>

                    <p:outputLabel for="mask" value="Mask:"/>
                    <p:calendar id="mask" value="#{calendarView.date9}" pattern="dd-MM-yyyy" mask="true"/>

                    <p:outputLabel for="datetime" value="Datetime:"/>
                    <p:calendar id="datetime" value="#{calendarView.date10}" pattern="MM/dd/yyyy HH:mm:ss"/>

                    <p:outputLabel for="dateTimeDe" value="Datetime (German):"/>
                    <p:calendar id="dateTimeDe" value="#{calendarView.dateTimeDe}" locale="de"
                                pattern="dd.MM.yyyy HH:mm"/>

                    <p:outputLabel for="time" value="Time Only:"/>
                    <p:calendar id="time" value="#{calendarView.date11}" pattern="HH:mm" timeOnly="true"/>
                </h:panelGrid>

                <p:commandButton value="Submit" update="msgs" action="#{calendarView.click}" icon="pi pi-check"/>

                <p:dialog modal="true" resizable="false" header="Values" widgetVar="dlg" showEffect="fold">
                    <p:panelGrid id="display" columns="2" columnClasses="label,value">
                        <h:outputText value="Inline:"/>
                        <h:outputText value="#{calendarView.date1}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="Popup:"/>
                        <h:outputText value="#{calendarView.date2}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="Button:"/>
                        <h:outputText value="#{calendarView.date3}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="Event:"/>
                        <h:outputText value="#{calendarView.date4}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="German:"/>
                        <h:outputText value="#{calendarView.date5}">
                            <f:convertDateTime pattern="yyyy-MMM-dd"/>
                        </h:outputText>

                        <h:outputText value="German (other Pattern):"/>
                        <h:outputText value="#{calendarView.date5}">
                            <f:convertDateTime pattern="dd.MM.yyyy"/>
                        </h:outputText>

                        <h:outputText value="Restricted:"/>
                        <h:outputText value="#{calendarView.date6}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="Multiple:"/>
                        <h:outputText value="#{calendarView.date7}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="Effect:"/>
                        <h:outputText value="#{calendarView.date8}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="Mask:"/>
                        <h:outputText value="#{calendarView.date9}">
                            <f:convertDateTime pattern="MM/dd/yyyy"/>
                        </h:outputText>

                        <h:outputText value="Datetime:"/>
                        <h:outputText value="#{calendarView.date10}">
                            <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss"/>
                        </h:outputText>

                        <h:outputText value="Datetime (German):"/>
                        <h:outputText value="#{calendarView.dateTimeDe}">
                            <f:convertDateTime pattern="dd.MM.yyyy HH:mm"/>
                        </h:outputText>

                        <h:outputText value="Time Only:"/>
                        <h:outputText value="#{calendarView.date11}">
                            <f:convertDateTime pattern="HH:mm"/>
                        </h:outputText>
                    </p:panelGrid>
                </p:dialog>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
